<!--护理计划管理页-->
<template>
  <!-- 大标题 -->
  <div style="height: 6vh;padding: 10px 20px;background-color: #fff">
    <span style="line-height: 60px;font-size: 20px;font-weight: bold">护理项目管理</span>
  </div>
  <!-- 搜索卡片 -->
  <el-card style="margin-top: 10px;height: 70px;">
    <el-form :inline="true">
      <el-form-item label="项目名称" style="width: 220px;">
        <el-input v-model="searchProjectForm.name" placeholder="请输入" @keydown.enter="loadProject"></el-input>
      </el-form-item>
      <el-form-item label="启用状态" style="width: 290px;">
        <el-select v-model="searchProjectForm.status" placeholder="请选择" @change="loadProject">
          <el-option label="启用" value="1"></el-option>
          <el-option label="禁用" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button round :icon="Refresh" type="info" @click="searchProjectForm = {}">重置</el-button>
        <el-button type="primary" :icon="Search" @click="loadProject">查询</el-button>
      </el-form-item>
      <el-button style="float: right" :icon="Edit" type="primary"
      @click="beforeAddProject">新增护理项目</el-button>
    </el-form>
  </el-card>
  <!-- 项目数据卡片 -->
  <el-card style="margin-top: 10px;">
    <el-table :data="ProjectArr">
      <el-table-column label="编号" type="index" width="80" align="center"></el-table-column>
      <el-table-column label="项目图片" prop="image" align="center" >
        <template #default="scope">
          <el-image style="width: 100px; height: 100px" :src="scope.row.image" :fit="fit" />
        </template>
      </el-table-column>
      <el-table-column label="项目名称" prop="name" align="center"></el-table-column>
      <el-table-column label="价格(元)" prop="price" align="center"></el-table-column>
      <el-table-column label="单位" prop="unit" align="center"></el-table-column>
      <el-table-column label="创建时间" prop="createTime" align="center"></el-table-column>
      <el-table-column label="状态" prop="status" align="center">
        <template #default="scope">
          <el-switch :active-value="1" @change="changeStatus(scope.row.status,scope.row.id)" :inactive-value="0" v-model="scope.row.status"></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button :icon="Edit" @click="updateProject(scope.row)">编辑</el-button>
          <el-button :icon="Delete" @click="deleteProject(scope.row.id)" type="danger">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <SimplePagination :total="total" v-model="pageParam" :fetch-data-fun="loadProject" />
  </el-card>

  <!-- 新建项目弹窗(对话框) -->
  <el-dialog
      :title="dialogTitle"
      v-model="dialogVisible"
      style="padding: 40px;"
      destroy-on-close
      @close="handleClose"
  >
      <SimpleForm
          v-model="form"
          @submitSuccess="onSubmitSuccess"
          @cancel-form="dialogVisible = false"
          :form-config="addNurSingForm"
      />
  </el-dialog>
</template>

<script setup>
import {onMounted, ref, watch} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";
import {Delete, Edit, Refresh, Search, SwitchButton} from "@element-plus/icons-vue";
import SimpleForm from '@/components/SimpleForm/index.vue';
import { addNurSingForm } from '@/utils/formItemsConfig.js'
import {
  addNurseProject,
  deleteNursingProject,
  loadNurseProjectApi,
  updateNursingProjectStatus
} from "@/api/nursing/nursingProject.js";
import SimplePagination from '@/components/SimplePagination/index.vue'
const total = ref(0);
const form = ref({});//表单数据
const pageParam = ref({
  page:1,
  limit:8
})
//定义变量控制弹窗是否出现
const dialogVisible=ref(false);
//定义变量用来保存弹窗的标题
const dialogTitle=ref('新增项目');
//点击"新建用户"按钮，让弹窗出现且改标题
const beforeAddProject=()=>{
  dialogTitle.value="新增护理";
  dialogVisible.value=true;
}
//处理弹窗关闭的方法
const handleClose=()=>{
  if(confirm("确定要关闭弹窗吗?")){
    //关闭弹窗且清空已输入的数据
    dialogVisible.value=false;
    saveUserForm.value={};
  }
}
//数据显示
//定义数组用来保存用户表格数据
const ProjectArr=ref([]);
//定义对象用来保存搜索卡片的用户搜索条件
const searchProjectForm=ref({name:'',status:''});
//定义加载用户数据的方法
const loadProject=async ()=>{
  // let data=qs.stringify(searchProjectForm.value);  //将对象转换为字符串
  const {total:totalVo,list} = await loadNurseProjectApi(searchProjectForm.value,pageParam.value);
  total.value = totalVo;
  ProjectArr.value = list;
};

const onSubmitSuccess =async (data)=>{
  await addNurseProject(data);
  ElMessage.success("添加成功!")
  dialogVisible.value = false;
  loadProject();
}

const changeStatus = async (state,id)=>{
  await updateNursingProjectStatus(state,id)
  ElMessage.success("修改成功!")
}

//定义删除按钮的方法
const deleteProject = id=>{
    ElMessageBox.confirm(
        '确定要删除改项目吗?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true,
        }
    )
        .then( async () => {
          await deleteNursingProject(id);
          ElMessage.success("删除成功!")
          loadProject();
        })
        .catch(() => {
          ElMessage.info('已取消删除');
        })
}
//定义方法用来编辑数据信息
const updateProject = async (row)=>{
  dialogVisible.value = true;
  form.value = {...row};
}
//页面一加载完毕，立即调用加载用户的方法
onMounted(()=>{
  loadProject();
});

watch(()=>dialogVisible.value,(n,v)=>{
  if(n === false){
    form.value = {items:[{}]};
  }
})
</script>

<style scoped lang="less">

</style>